<template>
  <transition 
    :enter-active-class="enterActive" 
    :leave-active-class="leaveActive">
    <div class="able-msg" v-if="isShow" @click="closeSelf">
      <div class="abm-inner" @click.stop="">
        <div class="abm-title" v-if="isTrue(title)">{{title}}</div>
        <div class="abm-msg" v-if="isTrue(msg)">{{msg}}</div>
        <div class="abm-slot"><slot></slot></div>
        <div class="abm-btn">
          <ab-button class="ab-btn" type="hollow" @click="close" v-if="'success,warning,error'.indexOf(type)>=0">取消</ab-button>
          <ab-button class="ab-btn" :type="type" @click="done">确定</ab-button>
        </div>
      </div>
    </div>
  </transition>
  <transition 
    :duration="{ enter: 0, leave: 500 }" 
    enter-active-class="animate__animated animate__fadeIn animate__faster" 
    leave-active-class="animate__animated animate__fadeOut animate__faster">
    <div class="able-msg-bg" v-if="isShow" @click="closeSelf"></div>
  </transition>
</template>

<script>
import { ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import AbButton from './AbButton.vue'
export default {
  components: { AbButton },
  props: ['type','title','msg','maskClose','show','animation'],
  emits: ['confirm'],
  setup(props, ctx) {
    let isShow = ref(false)
    let enterActive = ref('animation-zoomIn')
    let leaveActive = ref('animation-zoomOut')

    function init() {
      let s = props.show || ''
      if (s == 'top') {
        enterActive.value = 'animation-slideInDown5'
        leaveActive.value = 'animation-slideOutUp5'
      }
      if (s == 'bottom') {
        enterActive.value = 'animation-slideInUp5'
        leaveActive.value = 'animation-slideOutDown5'
      }
      if (s == 'left') {
        enterActive.value = 'animation-slideInLeft5'
        leaveActive.value = 'animation-slideOutLeft5'
      }
      if (s == 'right') {
        enterActive.value = 'animation-slideInRight5'
        leaveActive.value = 'animation-slideOutRight5'
      }
      if (screenTop == 'custom' && isTrue(props.animation)) {
        enterActive.value = props.animation.enter || enterActive.value
        leaveActive.value = props.animation.leave || leaveActive.value
      }
    }

    function open() {
      isShow.value = true
    }

    function close() {
      isShow.value = false
    }

    function closeSelf() {
      if (props.maskClose) isShow.value = false
    }

    function done() {
      ctx.emit('confirm','result:ok')
      // close()
    }

    onMounted(()=>{
      init()
    })

    function isTrue(v) {
      if (typeof(v) == 'string') v = true
      if (typeof(v) == 'undefined') v = false
      return v
    }

    return{
      isShow, enterActive, leaveActive,
      open, close, closeSelf, done, isTrue
    }
  },
}
</script>

<style lang="scss" scoped>
.able-msg{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;height:calc(100vh);
  position: fixed;
  left:0;top:0;
  z-index: 9;
  background-color: rgba(0,0,0,0);
  .abm-inner{
    width:auto;
    margin-top: -10rem;
    min-width: 25rem;
    max-width: 90%;
    color: #333;
    background-color: #fff;
    border: .1rem solid rgb(171,172,173);
    border-radius: .2rem;
    padding: 0 1rem;
    .abm-title{
      display: block;
      padding: .5rem;
      padding-top: 1.2rem;
      text-align: left;
      font-size: 1.1rem;
    }
    .abm-msg{
      display: block;
      padding: .5rem .8rem;
      text-align: left;
      font-size: .8rem;
    }
    .abm-slot{
      padding: 0;
    }
    .abm-btn{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      padding: .3rem;
      .ab-btn{
        font-size: .9rem;
      }
    }
  }
}
.able-msg-bg{
  display: block;
  width: 100%;height: calc(100vh);
  position: fixed;
  top:0;left:0;
  background-color: $color-modal-bg;
  z-index: 8;
}
@media screen and (max-width: $mobile-width+'px') {
.able-msg{
  .abm-inner{
    min-width:90%;
  }
} 
}
</style>